<template lang="pug">
  section
    Form(inline,:label-width='85').database-header
      Col
        FormItem(label='采集时间：')
          DatePicker(placeholder='开始时间',format="yyyy年MM月dd日",v-model='startTime',@on-open-change="handleSetDateReadonly")
          span(style='margin:0 5px') -
          DatePicker(placeholder='结束时间',format="yyyy年MM月dd日",v-model='endTime',@on-open-change="handleSetDateReadonly")
      FormItem(label='关键字：')
        Input(placeholder='关键字',v-model='searchKey',style='width:215px')
      FormItem(label='任务名称：')
        Input(placeholder='任务名称',v-model='taskName',style='width:215px')
      Button(type='primary',v-if="structureBtnStatus",style='margin-right:10px',@click='handleUpdateTableData()') 查询
      Button(style='margin-right:10px',@click='handleReset') 重置
      Button(v-if="structureDownBtnStatus",@click='handleModalStatus') 导出数据
    show-table(ref='tab',:total='total',:current='current',:columns='columns',:data='tabData',@handleChangePage='handleChangePage')
    Modal(title='导出数据',v-model='exportStatus').database-export
      Form(ref='exportForm',:model='formValidate',:rules='ruleValidate',:label-width='80')
        FormItem(label='文件名：',prop='fileName')
          Input(v-model='formValidate.fileName')
      template(slot='footer')
        Button(@click="handleCancel") 取消
        Button(type='primary',@click="handleStructDown") 确定
    Modal(v-model='detailStatus',width='800').database-modal
      vue-json-pretty(:data='detailData',:deep='2',showLength)
</template>

<script>
import asyncDatabase from '../../api'
import VueJsonPretty from 'vue-json-pretty'
import showTable from '@/components/show-table/show-table'
export default {
  name: 'SourceData',
  components: { showTable, VueJsonPretty },
  props: { structureBtnStatus: Boolean, structureDownBtnStatus: Boolean },
  data() {
    return {
      detailStatus: false,
      detailData: '',
      exportStatus: false,
      searchKey: '',
      taskName: '',
      startTime: '',
      endTime: '',
      total: 0,
      current: 1,
      tabData: [],
      formValidate: {
        fileName: ''
      },
      ruleValidate: {
        fileName: [{ required: true, message: '请输入导出文件名', trigger: 'blur' }]
      },
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center',
          title: '序号'
        },
        {
          title: '任务ID',
          width: 100,
          align: 'center',
          key: 'taskId'
        },
        {
          title: '任务名称',
          align: 'center',
          render: (h, params) => {
            return h('Tooltip', { attrs: { placement: 'top', content: `${params.row.taskName}` } }, params.row.taskName)
          }
        },
        {
          title: '时间',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', this.$dayjs(params.row.cleanTime).format('YYYY-MM-DD HH:mm:ss'))
          }
        },
        {
          title: '站点名称',
          align: 'center',
          key: 'sitName'
        },
        {
          title: '采集Url',
          align: 'center',
          render: (h, params) => {
            return h('Tooltip', { attrs: { placement: 'top-start', content: `${params.row.crawledUrl}` } }, params.row.crawledUrl)
          }
        }
      ],
      structureColumn: [
        {
          title: '详情',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {
                style: { color: '#2d8cf0', cursor: 'pointer' },
                on: {
                  click: () => {
                    if (params.row.jsonData) {
                      this.detailStatus = true
                      this.detailData = params.row.jsonData
                    } else {
                      this.detailData = []
                      this.$Message.info('暂无数据')
                    }
                  }
                }
              },
              '详情'
            )
          }
        }
      ]
    }
  },
  mounted() {
    if (this.$route.meta['结构数据']['/data/constructionSource/detail']) this.columns = [...this.columns, ...this.structureColumn]
    this.handleStructureTableData()
  },
  methods: {
    handleReset() {
      this.startTime = this.endTime = this.searchKey = this.taskName = this.formValidate.fileName = ''
      this.handleStructureTableData()
    },
    handleChangePage(pageSub) {
      this.handleUpdateTableData(pageSub)
    },
    handleUpdateTableData(current = 1) {
      this.current = current
      if (this.startTime > this.endTime) {
        this.$Message.warning('结束时间不得少于开始时间')
        return
      }
      this.handleStructureTableData()
    },
    handleStructureTableData: async function() {
      try {
        this.total = 0
        this.tabData = []
        this.$refs.tab.loading = true
        const res = await asyncDatabase.constructList({
          params: {
            searchKey: this.searchKey,
            taskName: this.taskName,
            pageIndex: this.current,
            pageSize: this.$refs.tab.pageSize,
            startTime: this.startTime === '' ? '' : +this.$dayjs(this.startTime),
            endTime: this.endTime === '' ? '' : +this.$dayjs(this.endTime)
          }
        })
        this.total = res.data.data.totalCount
        this.tabData = res.data.data.afterCleanDataModuleList
        this.$refs.tab.loading = false
      } catch (error) {
        this.$refs.tab.loading = false
      }
    },
    handleCancel() {
      this.exportStatus = false
      this.$refs.exportForm.resetFields()
    },
    handleModalStatus() {
      this.exportStatus = true
    },
    handleStructDown() {
      this.$refs['exportForm'].validate(async valid => {
        if (valid) {
          try {
            await asyncDatabase.download({
              data: {
                searchKey: this.searchKey,
                taskName: this.taskName,
                startTime: this.startTime === '' ? '' : +this.$dayjs(this.startTime),
                endTime: this.endTime === '' ? '' : +this.$dayjs(this.endTime),
                fileName: this.formValidate.fileName
              }
            })
            this.exportStatus = false
          } catch (error) {
            this.exportStatus = false
          }
        } else {
          this.exportStatus = true
        }
      })
    },
    handleSetDateReadonly() {
      document.querySelectorAll('.database-header .ivu-input')[0].setAttribute('readonly', true)
      document.querySelectorAll('.database-header .ivu-input')[1].setAttribute('readonly', true)
    }
  }
}
</script>

